<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>会员中心</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/pay_frame.css" />

</head>

<body>
  <div id="app" v-cloak>
    <div class="wrap flex-wrap flex-vertical">
      <div @click="goback" class="flex-con"></div>
      <div class="pay-wrap">
        <h1>充值</h1>
        <div class="info">支付金额：{{price}}</div>
        <ul class="pay-type">
          <li @click="selectPayType('wechat')" class="weixin active">
            <div class="label">
              <i class="iconfont icon-weixinzhifu"></i>
              <span>微信</span>
            </div>
            <i v-if="option == 'wechat'" class="iconfont icon-right-1"></i>
            <i v-else class="iconfont icon-yuanquan"></i>
          </li>
          <li @click="selectPayType('alipay')" class="alipay">
            <div class="label">
              <i class="iconfont icon-zhifubao"></i>
              <span>支付宝</span>
            </div>
            <i v-if="option == 'alipay'" class="iconfont icon-right-1"></i>
            <i v-else class="iconfont icon-yuanquan"></i>
          </li>
        </ul>
        <div class="pay-btn">
          <button @click="pay" type="button">立即支付</button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
  var app;
  apiready = function () {
    app = new Vue({
      el: '#app',
      data: {
        tid: api.pageParam.tid,
        price: api.pageParam.price,
        type: api.pageParam.type,
        option: 'wechat',
        appid: '',
        partnerid: '',
        prepayid: '',
        package: '',
        noncestr: '',
        timestamp: '',
        sign: '',
      },
      created: function () {},
      mounted: function () {},
      methods: {
        selectPayType: function (type) {
          var _this = this;
          _this.option = type;
        },

        pay: function () {
          var _this = this;
          api.showProgress({
            title: '',
            text: '',
          });
          api.ajax({
            url: baseUrl + 'pay/store',
            method: 'post',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid'),
                type: _this.type,
                tid: _this.tid,
                option: _this.option,
                channel: $api.getStorage('channel'),
                tuid: $api.getStorage('tuid'),
              },
            }
          }, function (ret, err) {
            api.hideProgress();
            if (ret.status == '200') {
              if (_this.option == 'wechat') {
                _this.appid = ret.data.appid;
                _this.partnerid = ret.data.partnerid;
                _this.prepayid = ret.data.prepayid;
                _this.package = ret.data.package;
                _this.noncestr = ret.data.noncestr;
                _this.timestamp = ret.data.timestamp + '';
                _this.sign = ret.data.sign;
                var wxPay = api.require('wxPay');
               wxPay.payOrder({
                  apiKey: _this.appid,
                  orderId: _this.prepayid,
                  mchId: _this.partnerid,
                  nonceStr: _this.noncestr,
                  timeStamp: _this.timestamp,
                  package: _this.package,
                  sign: _this.sign
                }, function (ret, err) {
                  if (ret.status) {
                    api.sendEvent({
                      name: 'vip_refresh',
                    });
                    api.sendEvent({
                      name: 'video_refresh',
                    });
                    api.closeFrame();
                  } else {
                    switch (err.code) {
                      case -2:
                        api.toast({ msg: '支付已取消' });
                        break;
                      case -1:
                        api.toast({ msg: '未知错误，可能的原因：签名错误、未注册APPID、项目设置APPID不正确、注册的APPID与设置的不匹配、其他异常等' });
                        break;
                      case 1:
                        api.toast({ msg: 'apiKey值非法' });
                        break;
                      default:
                        break;
                    }
                  }
                });
              }
              if (_this.option == 'alipay') {
                _this.orderInfo = ret.data;
                var aliPayPlus = api.require('aliPayPlus');
                aliPayPlus.payOrder({
                  orderInfo: _this.orderInfo[0],
                }, function (ret, err) {
                  //9000：支付成功
                  //8000：正在处理中，支付结果未知（有可能已经支付成功），请查询商户订单列表中订单的支付状态
                  //4000：订单支付失败
                  //5000：重复请求
                  //6001：用户中途取消支付操作
                  //6002：网络连接出错
                  //6004：支付结果未知（有可能已经支付成功），请查询商户订单列表中订单的支付状态
                  if (ret.code == 9000) {
                    // 刷新会员中心页面
                    api.sendEvent({
                      name: 'vip_refresh',
                    });
                    api.sendEvent({
                      name: 'video_refresh',
                    });
                    api.closeFrame();
                  } else {
                    api.toast({
                      msg: '支付失败'
                    })
                  }
                });
              }
            }
          })
        },
        goback: function () {
          api.sendEvent({
            name: 'setPaying_false',
            extra: {
              key: 'value'
            }
          });
          api.closeFrame();
        },
      },

    })

  }
</script>